<template>
	<div class="sellerRegist">
		<div>
			<seller-tap>
				<span slot='font'>立淘商家登录</span>
				<a href="#/seller" class="fa fa-chevron-left" slot='a'></a>
			</seller-tap>
			<main>
				<div>
					<img src="/static/img/1.png" />
				</div>
				<form @submit="login">
					<div><span>账号</span><input placeholder="用户名/手机/邮箱" autocomplete="off" @input="input1" @focus="focus" autofocus="autofocus" type="text" name="uname" v-model.trim="uname" /><label><i  v-if="fei1" style="color: red;" class="invalid fa fa-info-circle"></i><i v-if="uname" @click="clear" class="fa fa-times-circle"></i></label></div>
					<div><span>密码</span><input placeholder="6~12位" @input="input2" @focus="focus" name="pwd" v-model.trim="pwd" type="password" /><label><i  v-if="fei2" style="color: red;" class="invalid fa fa-info-circle"></i><i v-if="pwd" @click="clear" class="fa fa-times-circle"></i><i @click="disview" class="fa fa-eye" v-if="isView && pwd"></i><i v-if="!isView && pwd" @click="view" class="fa fa-eye-slash"></i></label></div>

					<button :class="{dis:isOk}">登录</button>
				</form>
				<div class="foot">
					已有账号？
					<a href="#/seller/regist">快去注册吧</a>
				</div>

			</main>
		</div>

		<alert :title='content' v-model='show'>

		</alert>
	</div>
</template>

<script>
	import $ from 'jquery'
	import axios from 'axios'
	import { Alert } from 'vux'
	import { mapState, mapGetters } from 'vuex'
	import SellerTap from '../components/SellerTap'
	export default {
		data: function() {
			return {
				uname: '',
				pwd: '',
				isOk: true,
				fei1: true,
				fei2: true,
				isView: false,
				content: '',
				show: false

			}
		},
		components: {
			SellerTap,
			Alert
		},
		computed: {
			...mapState([
				'seller', 'categorys', 'data3'
			]),
		},
		methods: {
			login: function(ev) {
				ev.preventDefault();

				if($('button').attr('class') == 'dis') {
					this.content = '请正确填写信息';
					this.show = true
					return;
				}

				var data = {
					uname: this.uname,
					pwd: this.pwd,

				}

				axios.post('/seller/login', data).then((result) => {
					console.log(result.data);
					if(result.data.msg == 'success') {
						location.href = '#/seller'
						this.$store.commit('updateSeller', result.data.seller);
						this.$store.commit('updateCategory', result.data.categorys);
					} else {
						this.show = true;
						this.content = result.data;

					}
				}).catch(function(err) {
					console.log(err);
				})

			},
			view: function(ev) {
				this.isView = !this.isView;
				$(ev.target).parent().siblings('input').attr('type', 'text');
			},
			disview: function(ev) {
				this.isView = !this.isView;
				$(ev.target).parent().siblings('input').attr('type', 'password');
			},

			clear: function(ev) {
				var name = $(ev.target).parent().siblings('input').attr('name');
				this[name] = '';
				$('form button').attr('type', 'button')
				this.isOk = true;
			},

			focus: function(ev) {

				$(ev.currentTarget).siblings('label').children().each(function(ins, item) {
					$(this).css('display', 'inline');
				})
				$(ev.currentTarget).parent().siblings().find('i').each(function() {
					$(this).css('display', 'none')
				})
			},
			pattern(val, patts, theData, ins) {
				$('label').eq(ins).children().each(function(ins, item) {
					$(this).css('display', 'inline');
				})
				if(!patts.test(val) || val == '') {
					this[theData] = true;
				} else {
					this[theData] = false;
				}

				if(this.fei1 || this.fei2) {
					$('form button').attr('type', 'button')
					this.isOk = true;
				} else {
					this.isOk = false;
					$('form button').attr('type', 'submit')
				}

			},
			input1() {
				var pat = /^[a-zA-Z0-9\-\.\+\*_ \u4e00-\u9fa5]{3,}$/;
				this.pattern(this.uname, pat, 'fei1', 0);
			},
			input2() {

				var pat = /^[a-zA-Z0-9\-\.\+\*_\@\#\!\?\$]{6,12}$/;
				this.pattern(this.pwd, pat, 'fei2', 1)

			},
			input3() {
				var pat = /^\d{11}$/;
				this.pattern(this.phone, pat, 'fei3', 2);

			},
			out() {
				axios.get('/seller/out').then((result) => {
					if(result.data.msg == 'success') {
						this.$store.commit('updateSeller', null);
					};
				}).catch((err) => {
					console.log(err);
				})
			}
		}
	}
</script>

<style scoped>
	main {
		padding: 10px;
		padding-top: 50px;
	}
	
	main img {
		display: block;
		width: 80px;
		margin: 0 auto;
		margin-bottom: 30px;
	}
	
	main form div {
		border-bottom: solid 1px #ddd;
		padding: 7px 0;
		line-height: 30px;
	}
	
	main form div span {
		margin-right: 10%;
	}
	
	main form div input {
		width: 55%;
		line-height: 30px;
		border: none;
		margin-right: 10px;
		background: none;
	}
	
	main button {
		border: none;
		background: red;
		color: white;
		margin-top: 40px;
		line-height: 40px;
		width: 100%;
		font-size: 17px;
		cursor: pointer;
	}
	
	.fa-times-circle {
		color: #aaa;
	}
	
	.fa-eye-slash {
		color: #ccc;
	}
	
	form div i:first-child {
		display: none;
	}
	
	form i {
		margin-right: 7px;
		font-size: 17px;
	}
	
	.foot {
		margin-top: 50px;
		font-size: 13px;
	}
	
	.foot a {
		font-size: 16px;
		margin-left: 30px;
		color: orangered;
	}
	
	.dis {
		color: darkgray;
		background: #ddd;
	}
	
	.head {
		height: 100px;
		background: url(/static/img/bg.jpg);
		background-size: 100%;
		padding: 20px;
		padding-top: 32px;
	}
	
	.head a {
		width: 30%;
		float: left;
	}
	
	.head a img {
		height: 60px;
		width: 60px;
		border-radius: 50%;
	}
	
	.head p {
		font-size: 20px;
		position: relative;
		float: left;
		width: 70%;
		line-height: 60px;
		padding-left: 20px;
		color: white;
	}
	
	.head p i {
		margin-right: 5px;
	}
	
	.head p span {
		font-size: 12px;
		position: absolute;
		right: -20px;
		padding: 10px;
		top: 15px;
		line-height: 10px;
		border-top-left-radius: 10%;
		border-bottom-left-radius: 10%;
		background: linear-gradient(to right, #FF9966 10%, #FF6600 100%);
		;
	}
	
	main {
		padding-top: 50px;
	}
	
	ul li {
		padding-left: 20px;
		padding-right: 20px;
		padding: 10px 0;
		border-bottom: solid 1px #eee;
	}
	
	ul li a {
		margin-left: 50px;
		position: relative;
	}
	
	main p:last-child {
		margin: 20px;
		background: orangered;
		text-align: center;
		line-height: 35px;
		color: white;
		cursor: pointer;
		margin-top: 100px;
	}
	
	a.index {
		position: absolute;
		color: white;
		top: 10px;
		left: 10px;
		font-size: 18px;
	}
	
	a i {
		position: absolute;
		top: 0;
		left: -45px;
		margin-right: 10px;
		font-size: 20px;
		color: orangered;
	}
</style>